<template>
	<view class="retrieve-password">
		<view class="fz24 bold mb25">
			找回密码
		</view>
		<view class="mb50">
			<view class="input-line flex align-c">
				<input type="password" style='width:0;height:0;min-height:0'/>
				<input type="text" autocomplete="off" style='width:0;height:0;min-height:0'/>
				<u-input v-model="phone" :clearable="false" maxlength='11' placeholder='请输入手机号' type="text"/>
				<u-button class="get-code-box" @click='getCode' :throttle-time='throttle_time' :disabled='countdown!=60000'>{{showCountdown}}</u-button>
			</view>
			<view class="input-line flex align-c">
				<u-input v-model="verification_code" :clearable="false" placeholder='请输入验证码' type="text"/>
			</view>
			<view class="input-line flex align-c">
				<u-input v-model="password" :clearable="false" placeholder='请设置新密码' type="password"/>
			</view>
			<view class="input-line flex align-c">
				<u-input v-model="verify_password" :clearable="false" placeholder='再次确认新密码' type="password"/>
			</view>
		</view>
		<view class="zhong">
			<u-button class="controls-btn" @click="verifyPassword">确认</u-button>
		</view>
	</view>
</template>

<script>
	import {
		sendVerificationCode,
		resetPassword
	} from '@/network/loginAndMy.js'
	export default {
		data() {
			return {
				phone: '', // 手机号
				verification_code: '', // 验证码
				password: '', // 密码
				verify_password: '', // 确认密码
				code_time: null, // 验证码定时器
				countdown: 60000, // 验证码倒计时
				throttle_time: null, // 验证码按钮
			}
		},
		mounted() {
			
		},
		computed: {
			showCountdown() {
				return this.countdown == 60000 ? '获取验证码' : this.countdown/1000
			},
		},
		methods: {
			// 获取验证码
			getCode() {
				if (this.contentVerify()) {
					this.throttle_time = 2000
					return
				}
				
				this.sendVerificationCode()
				this.throttle_time = 60000
				this.code_time = setInterval(()=> {
					this.countdown = this.countdown-1000
					if(this.countdown === 0){
						clearInterval(this.code_time);
						this.countdown = 60000
						return
					}
				},1000)
			},
			
			// 发送验证码
			sendVerificationCode() {
				sendVerificationCode({
					userphone: this.phone
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '发送成功',
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			
			// 确认密码
			verifyPassword() {
				if (this.contentVerify(1)) return
				
				let params = {
					type: 'forget',
					mobile: this.phone,
					newpassword: this.password,
					captcha: this.verification_code
				}
				
				resetPassword(params).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '设置成功',
							duration: 2000,
							icon: 'none',
							success: function(res) {
								setTimeout(()=>{
									uni.navigateBack({
										delta: 1
									});
								},2000)
							}
						});
					}
				})
			},
			
			// 输入内容验证
			contentVerify(type) {
				if (this.phone == '') {
					uni.showToast({
						title: '手机号不可为空',
						duration: 2000,
						icon: 'none'
					});
					return true
				}
			
				let regu = /^1[3-9][0-9]{9}$/
				if (!regu.test(this.phone)) {
					uni.showToast({
						title: '请输入有效的手机号码',
						duration: 2000,
						icon: 'none'
					});
					return true
				}
			
				if (type == 1 && this.password == '') {
					uni.showToast({
						title: '请输入密码',
						duration: 2000,
						icon: 'none'
					});
					return true
				}
				
				// let regex = new RegExp('(?=.*[0-9])(?=.*[A-Za-z])(?=.*[!@#$%^&*,\.])[0-9a-zA-Z!@#$%^&*,\\.]{8,16}$')
				// if (type == 1 && !regex.test(this.password)) {
				// 	uni.showToast({
				// 		title: '用户密码长度必须介于 8 和 16 之间包含大写字母、小写字母、数字和特殊符号',
				// 		duration: 3000,
				// 		icon: 'none'
				// 	});
				// 	return true
				// }
			
				if (type == 1 && this.verify_password == '') {
					uni.showToast({
						title: '请输入确定密码',
						duration: 2000,
						icon: 'none'
					});
					return true
				}
			
				if (type == 1 && this.password !== this.verify_password) {
					uni.showToast({
						title: '两次输入密码不一致!',
						duration: 2000,
						icon: 'none'
					});
					return true
				}
				
				if (type == 1 && this.verification_code == '') {
					uni.showToast({
						title: '请输入验证码',
						duration: 2000,
						icon: 'none'
					});
					return true
				}
			
				return false
			},
		}
	}
</script>

<style lang="scss">
	.retrieve-password {
		padding: 100rpx 30rpx 0;
		box-sizing: border-box;
		height: 100vh;
		.input-line{
			height: 110rpx;
			width: 100%;
			box-sizing: border-box;
			border-bottom: 1rpx solid #EDEDED;
			.get-code-box{
				width: 150rpx;
				height: 46rpx;
				line-height: 46rpx;
				text-align: center;
				border: 1rpx solid #E3BA5B;
				border-radius: 23rpx;
				color: #BB8422;
				margin: 0 !important;
				padding: 0 !important;
				font-size: 24rpx;
			}
			uni-button:after {
			  content: " ";
			  border: none !important;
			}
		}
		.controls-btn{
			border: none;
			margin: 0 !important;
			padding: 0 !important;
			font-size: 36rpx;
			color: #ffffff;
			background: linear-gradient(0deg,#b07412 0%, #e3ba5b 100%);
			border-radius: 10rpx;
			height: 90rpx;
			line-height: 90rpx;
			width: 600rpx;
		}
		uni-button:after {
		  content: " ";
		  border: none !important;
		}
	}
</style>